<template>
    <div class="payuser-container">
      <h1>支付用户界面</h1>
      <p>当前用户: {{ user() }}</p>
  
      <el-table :data="payList" style="width: 100%" stripe>
        <el-table-column prop="id" label="ID">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.id }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="department" label="科室">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.department }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="time" label="时间">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.time }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="cases" label="病例">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.cases }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="examination" label="检查">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.examination }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="medication" label="药物">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.medication }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="examinationprice" label="检查费用">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.examinationprice }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="Medicationprice" label="药物费用">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.Medicationprice }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="total" label="总费用">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.total }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column prop="name" label="医生">
          <template slot-scope="scope">
            <el-row>
              <el-col>{{ scope.row.name }}</el-col>
            </el-row>
          </template>
        </el-table-column>
  
        <el-table-column label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-col>
              <el-button
                type="primary"
                icon="el-icon-money"
                size="mini"
                @click="handlePay(scope.row)"
              >
                支付
              </el-button>
            </el-col>
            <el-col>
              <el-button
              class="out"
                type="danger"
                icon="el-icon-close"
                size="mini"
                @click="cancelPayment(scope.row)"
              >
                取消
              </el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        payList: [], // 存放支付信息的数组
      };
    },
    methods: {
      cancelPayment(row) {
      // 取消支付逻辑
      // 可以添加一些确认弹窗等操作来确保用户的意愿
      this.$confirm('确定要取消支付吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
         this.deletePayRecord(row.id)
         this.addMedicationNumber(row.medication)
         this.fetchPayData();
          this.$message({
            message:`已取消支付,退费${row.total}`,
            type: 'success',
          });
        })
        .catch(() => {
          // 用户取消操作
          // 无需处理
        });
    },
      user() {
        return this.$store.state.user.name;
      },
      addMedicationNumber(name) {
      // Send a POST request to decrease the 'number' column for the specified 'name'
      axios.post('http://127.0.0.1:3000/api/add-medication', { name })
        .then(response => {
          console.log(response.data); // Log the response from the server
          // Handle success, if needed
        })
        .catch(error => {
          console.error('Error decreasing medication number:', error);
          // Handle error, if needed
        });
    },
      fetchPayData() {
        const userName = this.user();
  
        // 发送请求获取支付信息
        axios.get(`http://127.0.0.1:3000/api/pay-by-name/${userName}`)
          .then(response => {
            this.payList = response.data;
            
          })
          .catch(error => {
            console.error('获取支付信息时发生错误:', error);
          });
      },
      handlePay(row) {
      // 模拟支付过程，假设支付需要3秒
      
      this.addpaylist()
      setTimeout(() => {
        // 跳转至useradmin/userhome页
        this.$router.push({ name: 'userhome' });
      }, 3000);
    },

    addpaylist(){
        axios.post('http://127.0.0.1:3000/api/paylistss', this.payList)
        .then(response => {
            console.log(response.data); // Log the response from the server
            this.deletePayRecord(response.data.id)
            // Handle success, if needed
            this.$message({
          message: '支付完成',
          type: 'success',
        });
        })
        .catch(error => {
            console.error('Error adding paylist:', error);
            // Handle error, if needed
        });
    },
    deletePayRecord(payId) {
    axios.delete(`http://127.0.0.1:3000/api/pay/${payId}`)
        .then(response => {
            console.log(response.data); // Log the response from the server
            // Handle success, if needed
        })
        .catch(error => {
            console.error(`Error deleting pay record with ID ${payId}:`, error);
            // Handle error, if needed
        });
}
    },
    mounted() {
      // 初始化时发送请求
      this.fetchPayData();
    },
  };
  </script>
  
  <style scoped>
  .payuser-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
  }
  
  p {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
  }
  .out{
    margin-top: 5px;
  }
  /* 可根据需求自定义样式 */
  
  </style>
  